<template>
	<!-- 页面全局配置 -->
	<view class="pageconfig">
		<!--vuetop-->
		<view class="flex1   response  flex flex-wrap justify-start  ">
			<view class="flex2   response  flex flex-wrap justify-start  ">
				<view class="flex3    flex flex-wrap justify-start  ">
					<view class=" 1  cu-avatar  lg round " :style="{'backgroundImage':'url('+bgpic4+')' }"
						style="background-color: unset;"></view>
				</view>
				<view class="flex5    flex flex-wrap justify-start  "
					style="flex-direction: column;align-items: flex-start;">
					<text class="text6 "> Hello，啄木鸟</text>
				</view>
			</view>
		</view>
		<view class="flex7   response  flex flex-wrap justify-start  ">
			<view class="flex8   response  flex flex-wrap justify-between  " style="align-items: center;">
				<view class="flex9   response  flex flex-wrap justify-between  " style="align-items: center;">
					<text class="text10 text-gray "> 其他功能</text>
				</view>
				<view class="   gongge11 1   response ">
					<view class=" cu-list grid col-4 no-border">
						<view class=" cu-item  " v-for="(item, index) in label11List" :class="['bg-' + item.zibgcolor]"
							:key="index" @click="to_info(item)">
							<view>
								<image v-if="item.imgtype !=2" :src="item.pic" class="round" mode="heightFix"
									style="width: auto;height:70rpx;line-height:0rpx"></image>
								<view v-if="item.imgtype ==2" :class="['' + item.iconname,'text-' + item.iconcolor]"
									style="font-size: 70rpx;margin-top: 0rpx;"></view>
								<view v-if="item.openjiao && item.jiaoname"
									:style="{'backgroundColor':item.jiaobgcolor?item.jiaobgcolor: 'red','padding':item.neidistance? item.neidistance*2+'rpx':'' }"
									class=" cu-tag badge">{{item.jiaoname}}</view>
							</view>
							<text style="font-size: unset;color: unset;margin-top:4rpx;">{{item.name}}</text>
						</view>
					</view>
				</view>

			</view>
		</view>

		<!--vuebottom-->
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {
		data() {
			return {
				bgpic4: 'https://image.meiye.art/Fha6tqRTIwHtlLW3xuZBJj8ZXSX3?imageMogr2/thumbnail/450x/interlace/1',


				label11List: [{
					"name": "气象数据",
					"myname": "",
					"myurl": "",
					"evtform": [],
					"apidata": "",
					"myremark": "",
					"imgtype": 2,
					"iconcolor": "blue",
					"apiimg": "",
					"apiname": "",
					"iconname": "cuIcon-location",
					"pic": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/fd2f58bb7251c6e5df08e8d05a23463b.png",
					"url": "/pages/tongji/tongji"
				}, {
					"name": "电话客服",
					"myname": "",
					"myurl": "",
					"evtform": [],
					"apidata": "",
					"myremark": "",
					"imgtype": 2,
					"iconcolor": "blue",
					"apiimg": "",
					"apiname": "",
					"iconname": "cuIcon-service",
					"pic": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/fd2f58bb7251c6e5df08e8d05a23463b.png",
					"url": "/pages/users/user_invoice_list/index"
				}, {
					"name": "在线客服",
					"myname": "",
					"myurl": "",
					"evtform": [],
					"apidata": "",
					"myremark": "",
					"imgtype": 2,
					"iconcolor": "blue",
					"apiimg": "",
					"apiname": "",
					"iconname": "cuIcon-mark",
					"pic": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/fd2f58bb7251c6e5df08e8d05a23463b.png",
					"url": "/pages/users/user_invoice_list/index"
				}, {
					"name": "投诉",
					"myname": "",
					"myurl": "",
					"evtform": [],
					"apidata": "",
					"myremark": "",
					"imgtype": 2,
					"iconcolor": "blue",
					"apiimg": "",
					"apiname": "",
					"iconname": "cuIcon-magic",
					"pic": "https://shitangsys.cntdh.net//uploads/store/comment/20220426/fd2f58bb7251c6e5df08e8d05a23463b.png",
					"url": "/pages/users/user_invoice_list/index"
				}],
				/**vuejs**/


			};
		},
		onLoad() {


		},
		methods: {

			to_info(item) {
				uni.navigateTo({
					url: item.url,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}

			/**
			 *          $vuetag = "";
			 *          $vuecss = "";
			 *          $vuejs = "";
			 *
			 */

			//获取数据

		}
	}
</script>

<style lang="less">
	/**
 *
 此处必须引用colorui样式,并放入根目录，css样式可以这样写
	@import "colorui/main.css";
	@import "colorui/icon.css";

 如需要引用colorui到全局，
 需要在App.vue 引入
 	@import "colorui/main.css";
	@import "colorui/icon.css";
 *
 */




	/**本页全局配置的代码**/
	.pageconfig {
		width: 100%;
		overflow: hidden;
		overflow-y: scroll;
		background-image: url(https://shitangsys.cntdh.net//uploads/store/comment/20240407/0b239dee1d14d96e92e39d25762b4410.jpg);
		background-size: cover;
		height: 100vh;
	}



	/**pagedomcss**/


	.flex1 {
		width: 100%;
		width: calc(100% - 80rpx);
		background-color: #ffffff;
		margin-top: 100rpx;
		margin-bottom: 40rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.flex2 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex3 {
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex5 {
		position: relative;
	}

	.text6 {
		font-size: 40rpx;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
		margin-left: 0rpx;
		margin-right: 0rpx;
	}

	.flex7 {
		width: 100%;
		width: calc(100% - 80rpx);
		margin-top: 40rpx;
		margin-bottom: 10rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.flex8 {
		width: 100%;
		background-color: #ffffff;
		position: relative;
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.flex9 {
		width: 100%;
		position: relative;
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.text10 {
		font-size: 36rpx;
	}

	.gongge11 {
		width: 100%;
	}
</style>